import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Home from './component/home'
import User from './component/user'
import Active from './component/active'
import Not from './component/Notfund'
import { HashRouter, Route, Link, Switch } from 'react-router-dom'

class App extends Component {
  state = {
    currtRoute: '',
  }

  render() {
    return (
      <HashRouter>
        <div>
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <Link to="/user">用户</Link>
            </li>
            <li>
              <Link to="/active/1">详情</Link>
            </li>
          </ul>
          <Switch>
            <Route path="/home" component={Home}></Route>
            <Route path="/user" component={User}></Route>
            <Route path="/active/:id" component={Active}></Route>
            {/* 404页面要放到最后,要使用Switch标签包裹 */}
            <Route component={Not}></Route>
          </Switch>
          {/* {this.state.currtRoute === '/home' && <Home></Home>}
        {this.state.currtRoute === '/user' && <User></User>}
        {this.state.currtRoute === '/active' && <Active></Active>} */}
        </div>
      </HashRouter>
    )
  }
  componentDidMount() {
    // window.addEventListener('hashchange', () => {
    //   console.log(window.location.hash)
    //   this.setState({
    //     currtRoute: window.location.hash.slice(1),
    //   })
    // })
  }
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
